<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城</title>
  <link rel="icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4987107_pp64qoawkc.css">
  <link rel="stylesheet" href="./css/black-nav.css">
  <link rel="stylesheet" href="./css/main-nav.css">
  <link rel="stylesheet" href="./css/search-nav.css">
  <link rel="stylesheet" href="./css/footer.css">
  <style>
    .main-header {
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #e0e0e0;

    }

    .main-header>.wrap {
      position: relative;
    }

    .main-header .wrap .nav-bar {
      z-index: 999;
    }

    .main-header .wrap .nav-bar .shop-all .slide {
      width: 234px;
      height: 460px;
      background-color: #fff;
      position: absolute;
      top: 100px;
      left: 0;
      padding: 20px 0;
      border: 1px solid #ff6a00;
      z-index: 999;
      display: none;
    }

    .main-header .wrap .nav-bar li:hover>.slide {
      display: block;
    }

    .main-header .wrap .nav-bar .shop-all .slide>ul>li {
      width: 234px;
      height: 42px;
      line-height: 42px;
      padding-left: 30px;
      cursor: pointer;


    }

    .main-header .wrap .nav-bar .shop-all .slide>ul>li>a {
      color: #424242;
      font-size: 14px;
    }

    .main-header .wrap .nav-bar .shop-all .slide>ul>li:hover {
      background-color: #ff6a00;

    }

    .main-header .wrap .nav-bar .shop-all .slide>ul>li:hover a {
      color: #fff;
    }

    .main-header .wrap .nav-bar .shop-all .slide>ul>li:hover a>span {
      color: #424242;
    }

    .slide i {
      float: right;
      padding-right: 20px;
      color: #757575;
    }

    .slide>ul>li:hover>i {
      color: #b0b0b0;
    }

    .slide-list {
      position: absolute;
      left: 234px;
      top: 0;
      width: 600px;
      height: 460px;
      background-color: #fff;
      display: none;
      box-shadow: 0 1px 5px #aaa;

    }

    .slide-list>ul {
      float: left;
      width: 247px;
      height: 456px;
      padding: 2px 0;
    }

    .slide-list>ul>li {
      width: 247px;
      height: 76px;
      padding-left: 20px;

    }

    .slide-list li:hover>a {
      color: #ff6a00;
    }

    .slide-list a {
      display: block;
      width: 247px;
      height: 76px;
      color: #333;
      line-height: 76px;
      font-size: 14px;
    }

    .slide-list img {
      margin-top: 18px;
      float: left;
      margin-right: 10px;
    }

    .slide-list span {
      display: block;
      float: left;
    }

    .slide li:hover>.slide-list {
      display: block;
    }

    .slide-list-width-one {
      width: 600px;
    }

    .slide-list-width-two {
      width: 992px;
    }


    /* 详情页类别开始 */

    .product-xl {
      width: 100%;
      background-color: #fff;
    }

    .product-xl>.product-box {
      height: 65px;
      line-height: 65px;
      box-shadow: 0 4px 5px #b0b0b060;
    }

    .product-xl>.product-box>.wrap>h2 {
      float: left;
      font-size: 18px;
      font-weight: 500;
      color: #424242;
    }

    .product-xl>.product-box>.wrap>.right {
      float: right;
      font-size: 14px;
    }

    .product-xl>.product-box>.wrap>.right>a {
      color: #424242;
    }

    .product-xl>.product-box>.wrap>.right>a:hover {
      color: #ff6700;
    }

    /* js控制隐藏效果 */
    .product-box-hidden {
      display: none;
    }

    #product-box{
      width: 100%;
      height: 65px;
      position: fixed;
      top: 0;
      z-index: 10;
      background-color: #fff;
      animation: product_top_show 0.5s linear;
    }

    @keyframes product_top_show {
      0% {
        top: -65px;
      }

      100% {
        top: 0;
      }
    }


    /* 提示登录区域 */
    .login-tip {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #b0b0b030;
      text-align: center;
      font-size: 14px;
      color: #404040;
      position: relative;
      display: block;
    }

    .login {
      margin-left: 20px;
    }

    .login-tip .login a {
      color: #ff6700;
    }

    .cancel {
      margin-left: 10px;
      position: absolute;
      top: 1.5px;
      color: #b0b0b0;
      cursor: pointer;
    }


    /* 商品详情*/
    .product-details {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 32px;
      padding-bottom: 12px;
    }


    /* 左侧商品图片 */
    .product-details .product-img-l {
      width: 606px;
      text-align: center;

    }

    .product-details .product-img-l img {
      width: 560px;
      height: 560px;
    }

    .product-details .product-img-l .banner-box {
      width: 560px;
      height: 560px;
      position: relative;
    }

    .banner-img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
      transition: all .5s;
    }

    .banner-img:first-child {
      opacity: 1;
    }

    /*左侧轮播按钮 */
    .banner-box .box-left {
      position: absolute;
      width: 40px;
      height: 70px;
      top: 195px;
      left: 10px;
      font-size: 28px;
      text-align: center;
      line-height: 70px;
      color: #ccc;
      border-radius: 5px 0 0 5px;
      cursor: pointer;
    }

    .banner-box .box-left:hover {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }

    .banner-box .box-right {
      position: absolute;
      width: 40px;
      height: 70px;
      top: 195px;
      right: 10px;
      font-size: 28px;
      text-align: center;
      line-height: 70px;
      color: #ccc;
      border-radius: 0 5px 5px 0;

    }

    .banner-box .box-right:hover {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
    }

    /* 左侧轮播显示位置按钮 */
    .banner-box .box-circle {
      position: absolute;
      bottom: 7px;
      right: 75px;
    }

    .banner-box .btn-circle {
      float: left;
      width: 50px;
      height: 3px;
      background-color: #33333380;
      margin-right: 12px;
      border: 1px solid #b0b0b0;
      cursor: pointer;
    }

    /* 右侧商品详情 */

    .product-details .product-details-r {
      flex: 1;
      margin-left: 25px;
    }

    .product-details-r h2 {
      font-size: 24px;
      font-weight: 400;
      color: #424242;
    }

    .product-details-r .desc span {
      color: #ff6700;
    }

    .product-details-r .desc {
      color: #b0b0b0;
      line-height: 1.5em;
      margin-top: 10px;
      font-size: 14px;
    }

    .product-details-r .info {
      color: #ff6700;
      font-size: 14px;
      margin-top: 12px;
    }

    .product-details-r .price {
      font-size: 18px;
      color: #ff6700;
      margin: 10px 0;
    }

    .product-details-r .line {
      border-bottom: 1px solid #e5e5e5;
      margin-top: 20px;
    }

    .product-details-r .address-box {
      position: relative;
      margin: 20px 0;
      border: 1px solid #e5e5e5;
      width: 100%;
      height: 104px;
      background-color: #b0b0b010;
      padding: 20px 30px;
    }

    .product-details-r .address-icon i {
      position: absolute;
      top: 25px;
      left: 20px;
      font-size: 25px;
      color: #999;
    }

    .product-details-r .address-con {
      margin-left: 20px;

    }

    .product-details-r .address-info {
      float: left;
    }

    .product-details-r .address-info span {
      display: inline-block;
      font-size: 14px;
      padding: 5px;
    }

    .product-details-r .edit {
      display: inline-block;
      font-size: 14px;
      color: #ff6700;
      padding: 5px;
    }

    .product-details-r .shop-desc {
      color: #ff6700;
      font-size: 14px;
      margin-left: 25px;
    }

    .buy-option .buy-box-child {
      clear: both;
      width: 600px;
      margin-top: 20px;
      height: 135px;
      margin-bottom: 30px;
    }

    .buy-option .buy-box-child .title {
      font-size: 18px;
      color: #333;
    }

    .buy-option .buy-box-child .buy-option-default {
      float: left;
      border: 1px solid #e0e0e0;
      width: 292px;
      height: 42px;
      line-height: 42px;
      margin-right: 12px;
      text-align: center;
      color: #757575;
      cursor: pointer;
      margin-top: 10px;
    }

    .buy-option .buy-box-child .clearfix li:nth-child(2),
    .buy-option .buy-box-child .clearfix li:nth-child(4),
    .buy-option .buy-box-child .clearfix li:nth-child(6) {
      margin-right: 0;
    }

    .buy-option .buy-box-child .buy-option-default:hover {
      border-color: #ff6700;
      color: #ff6700;
    }


    /* 按钮样式 */
    .buy-option .buy-box-child .buy-option-active {
      border-color: #ff6700;
      color: #ff6700;
    }

    .product-details-r .btn-box {
      clear: both;
      height: 54px;
      margin: 10px 0 20px 0;
    }

    .product-details-r .btn-box .info-cart {
      width: 300px;
      height: 51px;
      background-color: #ff6700;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      margin-top: 30px;
      margin-right: 10px;
      transition: all 0.3s;
    }

    .product-details-r .btn-box .collect {
      width: 142px;
      height: 51px;
      background-color: #b0b0b0;
      border: none;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      margin-top: 30px;
      transition: all 0.3s;
    }

    .product-details-r .btn-box .info-cart:hover {
      background-color: #ff4a00;
    }

    .product-details-r .btn-box .collect:hover {
      background-color: #757575;
    }


    .product-details-r .after-sale-info {
      clear: both;
      margin-top: 60px;
    }


    .product-details-r .after-sale-info .support {
      display: inline-block;
      margin: 0 15px 10px 0;
      font-size: 14px;
      color: #b0b0b0;
    }

    .product-details-r .after-sale-info .support i {
      position: relative;
      top: 2px;
      font-size: 20px;
      font-weight: 300;
      margin-right: 3px;
    }

    /* 价格说明样式 */
    .price-info{
      width: 100%;
      background-color: #f5f5f5;
     padding-bottom: 25px;
    }

    .price-info h2{
      font-size: 22px;
      font-weight: 500;
      padding: 22px 0;
    }

    .price-info img{
      width: 1226px;
    }



    /* 放大镜样式 */

    .zoom {
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 300px;
      background-color: gold;
      opacity: 0.3;
      display: none;

    }

    .zoom-big-img {
      border: 1px solid #b0b0b0;
      position: absolute;
      left: 606px;
      top: 0;
      width: 480px;
      height: 490px;
      overflow: hidden;
      display: none;
      z-index: 20;
    }

    .zoom-big-img img {
      position: absolute;
      width: 800px;
      height: 800px;
      left: 0;
      top: 0;
    }



    
  </style>
</head>

<body>
  <!-- 黑色导航栏 -->
  <div class="top-nav">
    <div class="wrap">
      <ul class="nav-l">
        <li class="item"><a href="#">小米官网</a><span>|</span></li>
        <li class="item"><a href="#">小米商城</a><span>|</span></li>
        <li class="item"><a href="#">小米澎湃</a><span>|</span></li>
        <li class="item"><a href="#">小米汽车</a><span>|</span></li>
        <li class="item"><a href="#">云服务</a><span>|</span></li>
        <li class="item"><a href="#">I0T</a><span>|</span></li>
        <li class="item"><a href="#">有品</a><span>|</span></li>
        <li class="item"><a href="#">小爱开放平台</a><span>|</span></li>
        <li class="item"><a href="#">资质证照</a><span>|</span></li>
        <li class="item"><a href="#">协议规则</a><span>|</span></li>
        <li class="item download">
          <a href="#">下载app</a>
          <!-- 若希望同时出现显示，那么要成为同级的元素，再设置css调整位置以及样式 -->
          <span>|</span>
          <div class="app-download">
            <img src="./img/download.png" alt="小米app下载图片" />
            <p>小米商城APP</p>
          </div>
          <div class="trangle"></div>
        </li>

        <li class="item"><a href="#">Select Location</a></li>
      </ul>
      <ul class="nav-r">
        <li class="item"><a href="#">登录</a><span>|</span></li>
        <li class="item"><a href="#">注册</a><span>|</span></li>
        <li class="item"><a href="#">消息通知</a></li>
        <li class="item buy">
          <a href="#">
            <i class="iconfont icon-gouwuchekong"></i> &nbsp;购物车（0）</a>
          <div class="card-buy">
            <p>购物车中还没有商品，赶紧选购吧！</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 白色导航栏 -->
  <div class="main-header">
    <div class="wrap">
      <div class="logo">
        <img src="./img/logo-mi2.png" alt="小米logo" />
      </div>
      <div class="nav-bar">
        <ul class="shop-all">
          <li class="item"> <a href="#">全部商品分类</a>
            <div class="slide">
              <ul>
                <li>
                  <a href="#">手机</a><i class="iconfont icon-icon"></i>
                  <div class="slide-list slide-list-width-one">
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaomi手机 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-02.webp" alt="" />
                          <span>REDMI手机</span></a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a href="#">电视</a><i class="iconfont icon-icon"></i>
                  <div class="slide-list slide-list-width-one">
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaom电视 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-02.webp" alt="" />
                          <span>REDMI手机</span></a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li><a href="#">家电</a><i class="iconfont icon-icon"></i></li>
                <li>
                  <a href="#">笔记本 平板 显示器</a><i class="iconfont icon-icon"> </i>

                  <div class="slide-list slide-list-width-two">
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaom电视 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaom手表 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-02.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaom影视 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-03.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                    <ul>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>Xiaom电脑 </span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-04.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                      <li>
                        <a href="#">
                          <img src="./img/slide-img-list-01.webp" alt="" />
                          <span>数字旗舰</span></a>
                      </li>
                    </ul>
                  </div>
                </li>
                <li>
                  <a href="#">出行 穿戴</a><i class="iconfont icon-icon"></i>
                </li>
                <li>
                  <a href="#">耳机 音响</a><i class="iconfont icon-icon"></i>
                </li>
                <li>
                  <a href="#">健康 儿童</a><i class="iconfont icon-icon"></i>
                </li>
                <li>
                  <a href="#">生活 箱包</a><i class="iconfont icon-icon"></i>
                </li>
                <li>
                  <a href="#">智能 路由器</a><i class="iconfont icon-icon"></i>
                </li>
                <li>
                  <a href="#">电源 配件</a><i class="iconfont icon-icon"></i>
                </li>
              </ul>
            </div>

          </li>

        </ul>


        <ul>
          <div class="yes-list">
            <li class="item"><a href="#">Xiaomi手机</a></li>
            <li class="item"><a href="#">REDMI手机</a></li>
            <li class="item"><a href="#">电视</a></li>
            <li class="item"><a href="#">笔记本</a></li>
            <li class="item"><a href="#">平板</a></li>
            <li class="item"><a href="#">家电</a></li>
            <li class="item"><a href="#">路由器</a></li>
            <div class="nav-list">
              <div class="wrap">
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_02.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_03.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_04.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_05.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_06.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
                <ul class="nav-detail-list">
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_06.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>
                  </li>
                  <li class="item">
                    <a href="#" class="img-box none-border">
                      <img src="./img/nav-list_01.webp" alt="" />
                    </a>
                    <p class="title"><a href="#">Xiaomi至尊手机</a> </p>
                    <p class="cost">5999起 </p>
                  </li>

                </ul>
              </div>
            </div>
          </div>


          <div class="no-list">
            <li class="item"><a href="#">服务中心</a></li>
            <li class="item"><a href="#">社区</a></li>
          </div>

        </ul>
      </div>
      <div class="search-section">
        <div class="search"></div>
        <form action="hh">
          <input class="search-text" id="search-input" type="text" placeholder="热水器" />
          <div class="search-list">
            <ul class="list">
              <li class="item"><a href="#">手机换新</a></li>
              <li class="item"><a href="#">小米手环9</a></li>
              <li class="item"><a href="#">笔记本</a></li>
              <li class="item"><a href="#">Redmi K70至尊版</a></li>
              <li class="item"><a href="#">门锁</a></li>
              <li class="item"><a href="#">热水器</a></li>
              <li class="item"><a href="#">晾衣架</a></li>
            </ul>
          </div>
          <button id="search-btn" class="search-btn iconfont icon-sousuo" type="submit"></button>
        </form>
      </div>
    </div>
  </div>

  <!-- 白色导航下拉菜单 -->
  <div class="product-xl">
    <div class="product-box">
      <div class="wrap">
        <h2>Xiaomi手机15系列</h2>
        <div class="right">
          <a href="#">用户评价</a>
        </div>
      </div>
    </div>
    <div id="product-box" class="product-box product-box-hidden">
      <div class="wrap">
        <h2>Xiaomi手机15系列</h2>
        <div class="right">
          <a href="#">用户评价</a>
        </div>
      </div>
    </div>
  </div>

  <!-- 提示登录区域 -->
  <div class="login-tip">
    <p>为方便您购买，请提前登录<span class="login "><a href="#">立即登录</a></span> <i class="cancel iconfont icon-closel"></i></p>
  </div>

  <!-- 商品详情区域开始 -->
  <div class="product-details-info">
    <div class="wrap">
      <div class="product-details">

        <div class="product-img-l">
          <div class="banner-box">
            <div class="banner-img">
              <img src="img/product-list-01.png" alt="" />
            </div>
            <div class="banner-img">
              <img src="img/product-list-02.png" alt="" />
            </div>
            <div class="banner-img">
              <img src="img/product-list-03.png" alt="" />
            </div>
            <div class="banner-img">
              <img src="img/product-list-01.png" alt="" />
            </div>
            <div class="banner-img">
              <img src="img/product-list-02.png" alt="" />
            </div>
            <div class="banner-img">
              <img src="img/product-list-03.png" alt="" />
            </div>

            <div class="box-left">&lt;</div>
            <div class="box-right">&gt;</div>
            <!-- 放大镜部分 -->
            <div class="zoom">

            </div>
            <div class="zoom-big-img">
              <img src="img/product-list-01.png" alt="">
            </div>


            <div class="box-circle">
              <ul>
                <li class="btn-circle"></li>
                <li class="btn-circle"></li>
                <li class="btn-circle"></li>
                <li class="btn-circle"></li>
                <li class="btn-circle"></li>
                <li class="btn-circle"></li>
              </ul>
            </div>

          </div>

        </div>
        <div class="product-details-r">
          <h2>REDMI Note 15 Pro+</h2>
          <p class="desc">
            <span>「至高优惠100元」</span>真抗摔 真防水 长续航
          </p>
          <p class="info"
            title="企业名称：小米通讯技术有限公司
企业执照注册号：91110108558521630L
企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
企业电话：950816
营业期限：2010年08月25日 至 2040年08月24日
经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">
            小米自营
          </p>
          <p class="price">4499元</p>
          <div class="line"></div>
          <div class="address-box">

            <div class="address-icon">
              <i class="iconfont icon-dingwei"></i>
            </div>
            <div class="address-con">
              <div class="address-info">
                <span>北京</span><span>北京市</span><span>海淀区</span><span>清河街道</span>
              </div>
              <a href="#" class="edit">修改</a>
            </div>

            <div class="shop-desc">
              <span>有现货</span>
            </div>
          </div>

          <div class="buy-option">
            <div class="buy-box-child">
              <div class="option-box">
                <div class="title">选择产品</div>
                <ul class="clearfix">
                  <li class="buy-option-default buy-option-active">Xiaomi 15 Pro</li>
                  <li class="buy-option-default">Xiaomi 15 Pro</li>
                  <li class="buy-option-default">Xiaomi 15 Pro</li>

                </ul>
              </div>
            </div>
            <div class="buy-box-child">
              <div class="option-box">
                <div class="title">选择版本</div>
                <ul class="clearfix">
                  <li class="buy-option-default">12GB+512GB</li>
                  <li class="buy-option-default buy-option-active">12GB+512GB</li>
                  <li class="buy-option-default">12GB+512GB</li>
                  <li class="buy-option-default">12GB+512GB</li>
                </ul>
              </div>
            </div>
            <div class="buy-box-child">
              <div class="option-box">
                <div class="title">选择颜色</div>
                <ul class="clearfix">
                  <li title="orange" class="buy-option-default">橙色</li>
                  <li title="orange" class="buy-option-default">橙色</li>
                  <li title="orange" class="buy-option-default">橙色</li>
                  <li title="orange" class="buy-option-default">橙色</li>
                  <li title="orange" class="buy-option-default buy-option-active">橙色</li>
                </ul>
              </div>
            </div>

          </div>

          <div class="btn-box">
            <button class="info-cart">加入购物车</button>
            <button class="collect"><i class="iconfont"></i>收藏</button>
          </div>
          <div class="after-sale-info">
            <span class="support"><i class="iconfont icon-duigou"></i>小米自营</span>
            <span title="由小米发货" class="support"><i class="iconfont icon-duigou"></i>发货说明</span>
            <span class="support"><i class="iconfont icon-duigou"></i>7天无理由退货（到店自取拆封后不支持）</span>
            <span title="由小米发货商品(不含有品),单笔满69元免运费;
由小米有品发货的商品,免运费;
由第三方商家发货的商品，运费以实际结算金额为准;
特殊商品需要单独收取运费,具体以实际结算金额为准;优惠券等不能抵扣运费金额;如需无理由退货,用户将承担该商品的退货物流费用;
使用门店闪送服务，需单独支付运费，起送费10元起 ，根据配送距离有所不同，具体请以订单结算页面显示为准。" class="support"><i class="iconfont icon-duigou"></i>运费说明</span>
            <span
              title="企业名称：小米通讯技术有限公司
企业执照注册号：91110108558521630L
企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
企业电话：950816
营业期限：2010年08月25日 至 2040年08月24日
经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）"
              class="support"><i class="iconfont icon-duigou"></i>企业信息</span>
            <span class="support"><i class="iconfont icon-duigou"></i>7天价格保护</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 商品详情结束 -->

  <!-- 价格说明开始 -->

  <div class="price-info">
    <div class="wrap">
      <h2 >价格说明</h2>
      <div class="info-img">
        <img src="./img/price-info.png" alt="">
      </div>
    </div>
  </div>
  <!-- 价格说明结束 -->

      <div class="footer">
      <div class="wrap">
        <div class="footer-service">
          <ul>
            <li>
              <a href=""
                ><i class="iconfont icon-yijiuhuanxin"></i>
                <span>预约维修服务</span></a
              >
            </li>
            <li>
              <a href=""
                ><i class="iconfont icon-yijiuhuanxin"></i>
                <span>七天无理由退货</span></a
              >
            </li>
            <li>
              <a href=""
                ><i class="iconfont icon-yijiuhuanxin"></i>
                <span>15天免费换货</span></a
              >
            </li>
            <li>
              <a href=""
                ><i class="iconfont icon-yijiuhuanxin"></i>
                <span>满69包邮</span></a
              >
            </li>
            <li>
              <a href=""
                ><i class="iconfont icon-yijiuhuanxin"></i>
                <span>1100余家售后网点</span></a
              >
            </li>
          </ul>
        </div>
        <div class="footer-link">
          <div class="footer-link-left">
            <ul>
              <li>选购指南</li>
              <li><a href="#">手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">笔记本</a></li>
            </ul>
            <ul>
              <li>服务中心</li>
              <li><a href="#">手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">笔记本</a></li>
              <li><a href="#">可持续发展</a></li>
              <li><a href="#">可持续发展</a></li>
              <li><a href="#">可持续发展</a></li>
              <li><a href="#">可持续发展</a></li>
              <li><a href="#">可持续发展</a></li>
            </ul>
            <ul>
              <li>线下门店</li>
              <li><a href="#">手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">小米之家</a></li>
            </ul>
            <ul>
              <li>关于小米</li>
              <li><a href="#">手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">笔记本</a></li>
              <li><a href="#">申请售后</a></li>
            </ul>
            <ul>
              <li>关注我们</li>
              <li><a href="#">手机</a></li>
              <li><a href="#">电视</a></li>
              <li><a href="#">笔记本</a></li>
              <li><a href="#">新浪微博</a></li>
            </ul>
          </div>
          <div class="footer-link-right">
            <div class="footer-r-top">
              <p class="phone-num">400-100-578</p>
              <p class="work-time">8:00-18:00 (仅收市话费)</p>
              <button>
                <i class="iconfont icon-yijiuhuanxin"></i>人工客服
              </button>
            </div>
            <div class="footer-t-buttom">
              <p class="phone-num">400-100-578</p>
              <div>
                <p class="work-time">8:00-18:00 (仅收市话费)</p>
                <p class="work-time">适用于：MIX FOLD,巨屏显示器系列</p>
              </div>

              <button>
                <i class="iconfont icon-yijiuhuanxin"></i>人工客服
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-info">
      <div class="wrap">
        <div>
          <div class="logo-buttom">
            <i class="iconfont icon-icon-xiaomiguishu"></i>
          </div>
          <div class="text-buttom">
            <p class="site">
              <a href="">小米商城</a>
              <span>|</span>
              <a href="">小米崇拜OS</a>
              <span>|</span>
              <a href="">米家</a>
              <span>|</span>
              <a href="">多看</a>
              <span>|</span>
              <a href="">游戏</a>
              <span>|</span>
              <a href="">音乐</a>
              <span>|</span>
              <a href="">政企服务</a>
              <span>|</span>
              <a href="">小米天猫店</a>
              <span>|</span>
              <a href="">小米集团隐私政策</a>
              <span>|</span>
              <a href="">小米公司儿童信息保护规则</a>
              <span>|</span>
              <a href="">小米商城隐私政策</a>
              <span>|</span>
              <a href="">小米商城用户协议</a>
              <span>|</span>
              <a href="">问题商城</a>
              <span>|</span>
              <a href="">Select Location</a>
            </p>

            <p class="site">
              <a href="#">北京互联网法院法律服务工作站</a>
              <span>|</span>
              <a href="#">中国消费者协会</a>
              <span>|</span>
              <a href="#">北京市消费者协会</a>
            </p>

            <p class="site">
              &copy;
              <a href="#">mi.com</a>
              <span>|</span>
              京ICP证110507号
              <a href="#">京ICP备10046444号-2</a>
              <a href="#">京公网安备11010802020134号</a>
              <a href="#">京网文[2014]0059-0009</a>
              <br />
              <a href="#">（京）网械平台备字（2018）第00005号</a>
              <a href="#"
                >药品医疗器械网络信息服务备案
                (京)网药械信息备字（2024）第00478号</a
              >

              <a href="#">营业执照</a>
              <a href="#">医疗器械质量公告</a>
              <br />

              <a href="#">增值电信业务经营许可证编号：京B2-20180851</a>
              网络食品经营备案 京食药网食备202010048
              <a href="#">食品经营许可证</a>
              新出发京批字第直220280号
              <br />
              违法和不良信息举报电话：171-5104-4404
              <a href="#">知识产权侵权投诉</a>
              本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
          </div>
        </div>
        <div class="buttom-img">
          <a href="#"><img src="./img/v-logo-1.png" alt="" /></a
          ><a href="#"><img src="./img/v-logo-2.png" alt="" /></a
          ><a href="#"><img src="./img/v-logo-3.png" alt="" /></a
          >
          <a href="#">
            <img class="link-img" src="./img/v-logo-4.png" alt="" />
            <img
              class="link-img link_img_active"
              src="./img/v-logo-5.png"
              alt=""
          /></a>
        </div>

        <div class="page-bottom-text">
          <p>让全球每个人都能享受科技带来的生活</p>
        </div>
      </div>
    </div>
    <script src="./footer.js"></script>
  <script src="./index.js"></script>
  <script src="./js/detail.js"></script>
</body>

</html>